var time, sta, index = 0;
var myvid = document.querySelectorAll(".movie-advert>#video");  // 视频
var poster = document.querySelectorAll(".banner-poster>a");  // 海报
// 点击banner播放视频
function play_video() {
    for (let i = 0; i < myvid.length; i++) {
        // 循环遍历一次banner，添加事件监听，鼠标点击之后获取目标索引，然后播放视频
        myvid[i].addEventListener('click', () => {  // 当banner被点击时
            if (myvid[index].paused) {
                // 如果视频暂停则播放视频
                myvid[i].play();
            }
            // 停止定时器
            clearInterval(time);
            timer();
        })
    }
}
// 滚动页面条暂停视频并重新加载视频
document.onscroll = function () {
    //为了保证兼容性，这里取两个值，哪个有值取哪一个
    // 监听滚动条是否滚动
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        // 滚动条有变化，如果视频播放则重新加载视频
        myvid[index].src = myvid[index].src;
        myvid[index].pause();
    }
}
// 轮播图切换暂停视频
function toggleStop() {
    for (let i = 0; i < myvid.length; i++) {
        // 循环遍历一次视频，进行暂停，并重新加载
        myvid[i].pause();
        myvid[index].src = myvid[index].src;
    }
}
// 静音按钮
$(".sound-btn").click(function () {
    // 如果视频静音则打开声音
    if (myvid[index].muted == true) {
        myvid[index].muted = false;
        $(this).children().prop("class", "iconfont icon-shengyin");
    } else {
        myvid[index].muted = true;
        $(this).children().prop("class", "iconfont icon-jingyin");
    }
})
// 轮播图
function add() {
    // 当index大于总图片数，index=0，即跳回第一张图片，否则自加一
    if (index >= poster.length - 1) {
        index = 0;
    } else {
        index++;
    }
}
function desc() {
    // 如果当前图像位置小于1，则往前跳到最后一张，否则自减一
    if (index < 1) {
        index = poster.length - 1;
    } else {
        index--;
    }
}
// 定位方法
function position() {
    // 获取当前索引，添加显示类，把所有兄弟级的class移除即隐藏，然后暂停所有视频
    $(".banner-poster a").eq(index).addClass("poster").siblings().removeClass("poster");
    $(".movie-info-wrap li").eq(index).addClass("info").siblings().removeClass("info");
    $(".movie-advert #video").eq(index).addClass("myvid").siblings().removeClass("myvid");
    toggleStop()
}
// 设置定时器，index自加一，并执行上面的方法，每3.5秒轮播一次
function timer() {
    time = setInterval(() => {
        if (myvid[index].paused) {
            // 如果视频正在播放则不进行轮播
            index++;
            desc();
            add();
            position();
        }
    }, 3500)
}
for (let i = 0; i < poster.length; i++) {
    // 循环遍历一次海报，添加事件监听，鼠标移入之后获取目标索引，然后执行方法
    poster[i].addEventListener('mouseover', () => {
        // 如果索引值是原来的值,则停止定时器继续播放视频
        if (index != i) {
            // 索引值为i则切换轮播
            index = i;
            position();
            // 停止定时器
            clearInterval(time);
            timer();
        }
        clearInterval(time);
        timer();
    })
}

// 点击banner播放视频
play_video()
// 开启定时器
timer();

